<!--
 * @Author: LiuYan
 * @Date: 2022-12-17 13:38:50
 * @LastEditors: GuoShuning
 * @LastEditTime: 2022-12-23 15:07:44
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>Document</title>
  <style>
    .body {
      padding: 0 !important;
      overflow: hidden;
    }

    .body .table-body {
      height: 305px !important;
      overflow-y: auto;
    }

    .ghcj2 .tab_button .input-group label {
      width: 32px;
      height: 32px;
      background: #3e7bfa;
      border-radius: 0px 6px 6px 0px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div class="ghcj2" id="app">
    <div class="body">
      <div class="tab-group">
        <div class="tab_button">
          <!-- <button class="button_primary">任务拆解</button>
          <button class="button_primary_plain">进度跟进</button>
          <button class="button_primary_plain">团队日报</button> -->
          <div class="input-group">
            &ensp;
            <input style="width: 16vw" placeholder="请输入姓名/联系方式/关键词" />
            <label> <img src="./common/img/ghcj2/sosou.png" /> </label>
          </div>
        </div>
        <div class="input-btn">
          <button class="button_warning" id="addPerson">
            <img src="./common/img/ghcj2/addPerson.png" />添加成员
          </button>
        </div>
      </div>
      <div class="tableListCount">本项目团队共 <span>12</span> 名成员</div>
      <div class="table">
        <div class="table-header">
          <div class="tr">
            <div class="td center" style="width: 10%">成员姓名</div>
            <div class="td center" style="width: 10%">部门</div>
            <div class="td center" style="width: 10%">职位</div>
            <div class="td center" style="width: 10%">手机号码</div>
            <div class="td center" style="width: 10%">邮箱</div>
            <div class="td center" style="width: 10%">最后登录</div>
            <div class="td center" style="width: 10%">访问次数</div>
            <div class="td center" style="width: 10%">操作</div>
          </div>
        </div>
        <div class="table-body">
          <div class="tr" v-for="item in list">
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">
              <button class="button_primary_text" @click="handle(item)">
                移除
              </button>
            </div>
          </div>
        </div>

      </div>
      <div class="pagination">
        <span>共 {{total}} 条</span>
        <ul>
          <li @click="shang"><i class="bi bi-chevron-left"></i></li>
          <li v-show="start > 0" @click="()=>{
                if(start > 0){
                  params.page = start;
                  end-=3
                  start-=3
                }
              }">
            ...
          </li>
          <li @click="onCurrentPage(item)" v-for="item in totalPage" v-show="item < end && item > start"
            :class="[item == params.page ? 'active' :'']">
            {{item}}
          </li>
          <li v-show="end <= totalPage" @click="()=>{
                if(end <= totalPage){
                params.page = end;
                end+=3
                start+=3
                }
              }">
            ...
          </li>
          <li @click="next"><i class="bi bi-chevron-right"></i></li>
        </ul>
      </div>
    </div>
    <!-- 填写日报 -->
    <div id="addPersonBox">
      <iframe src="./选择人员.html" width="100%" height="100%" frameborder="0"></iframe>
    </div>
  </div>
</body>
<script src="./common/js/vue.js"></script>
<script type="module">
  import DiaLog from "./common/js/diaLog.js";
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        total: 0,
        totalPage: 0,
        start: 0,
        end: 4,
        list: [],
        params: {
          page: 1,
          limit: 10,
        },
      };
    },
    //页面初始化加载
    mounted() {
      console.log("页面初始化加载");
      this.get();
    },
    //所有函数都写在这里
    methods: {
      shang() {
        if (this.params.page > 1) this.params.page--;
        if (this.params.page < this.start + 1) {
          this.end -= 3;
          this.start -= 3;
        }
        this.get();
      },
      next() {
        if (this.params.page < this.totalPage) this.params.page++;
        if (this.params.page > this.end - 1) {
          this.end += 3;
          this.start += 3;
        }
        this.get();
      },
      onCurrentPage(page) {
        this.params.page = page;
      },
      //接口
      get() {
        // ajax 请求
        // $.ajax()
        this.totalPage = 10; // 总页数
        this.total = 100; //总条数
        this.list = [
          {
            value: "吴恒",
          },
        ];
      },
    },
  }).mount("#app");
  let dialog = new DiaLog({
    title: "添加成员",
    width: "50% ",
    el: "#addPersonBox",
    cancelText: "取消",
    confirmText: "确定",
    zIndex: 100,
    cancel: () => {
      console.log("取消");
      dialog.hide();
    },
    confirm: (document) => {
      console.log("确定");
      dialog.hide();
    },
  });
  addPerson.addEventListener("click", () => {
    dialog.show();
  });
</script>

</html>